﻿/* 
    CSS naming convention:

    - Dashboard core script maps all telemetry data properties to respective class names,
      so truck's speed will be .truck-speed and current gear is .truck-gear 
      (see complete reference in Telemetry.md markdown file).
    - All boolean telemetry properties will have a special ".yes" class added 
      when the value is true (will be removed if value is false).
    - When dashboard core script updates DOM it will always add 
      data-value attribute containing current value, so you 
      can use it to have custom css selectors based on the actual data 
      (for example, this skin uses .truck-gear[data-value="N"] to define
      different style for neutral or reverse gear, see below).

    For more information go to home page: https://github.com/Funbit/ets2-telemetry-server

*/



// useful LESS mixins and variables

@arrow-color: #cd0000;

.setRotation(@angle) {
    -webkit-transform: rotate(@angle);
    -moz-transform: rotate(@angle);
    -ms-transform: rotate(@angle);
    -o-transform: rotate(@angle);
    transform: rotate(@angle);    
}

.setOrigin(@width, @height) {
    -webkit-transform-origin: @width @height;
    -moz-transform-origin: @width @height;
    -ms-transform-origin: @width @height;
    -o-transform-origin: @width @height;
    transform-origin: @width @height;  
}

.hidden {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

// dashboard background

.dashboard {    
    background-image: url("images/bg-off.png");    
    &.game-connected.yes { 
        background-image: url("images/bg-on.png");
    }
}

// meters

.truck-speed[data-type="meter"] {
    .visible;
    position: absolute;
    left: 571px;
    top: 121px;
    width: 10px;
    height: 110px;
    background-color: @arrow-color;
    .setRotation(-114deg);
    .setOrigin(50%, 440px);
}

.truck-engineRpm {
    position: absolute;
    left: 1580px;
    top: 105px;
    width: 10px;
    height: 110px;
    background-color: @arrow-color;
    .setRotation(-97deg);
    .setOrigin(50%, 336px);    
}

.truck-fuel {
    position: absolute;
    left: 1452px;
    top: 546px;
    width: 10px;
    height: 60px;
    background-color: @arrow-color;
    .setRotation(-96deg);
    .setOrigin(50%, 198px);    
}

.truck-waterTemperature {
    position: absolute;
    left: 1788px;
    top: 546px;
    width: 10px;
    height: 60px;
    background-color: @arrow-color;
    .setRotation(0deg);
    .setOrigin(50%, 198px);    
}

// other elements

.truck-speedRounded, .truck-cruiseControlSpeedRounded {
    color: #2491b9;
    font-family: Courier New, Courier, monospace;
    font-weight: bold;
    font-size: 70px;
    position: absolute;
    left: 460px;
    top: 273px;
    width: 190px;
    height: 66px;
    text-align: right;    
}

.truck-gear {
    color: #35b32e;
    font-family: Courier New, Courier, monospace;
    font-weight: bold;
    font-size: 70px;
    position: absolute;
    left: 516px;
    top: 692px;
    width: 134px;
    height: 100px;
    text-align: center;
}

.truck-gear[data-value="N"] {
    color: #2c8a26;
}

.truck-gear[data-value="R"] {
    color: #ddff00;
}

.truck-odometer {
    color: #1a6783;
    font-family: Courier New, Courier, monospace;
    font-weight: bold;
    font-size: 70px;
    position: absolute;
    left: 376px;
    top: 563px;
    width: 368px;
    height: 70px;
    text-align: right;
}

.truck-blinkerLeftOn {
    background-image: url("images/blinker-left-off.png");
    position: absolute;
    left: 98px;
    top: 78px;
    width: 102px;
    height: 92px;
    &.yes { background-image: url("images/blinker-left-on.png") }
}

.truck-blinkerRightOn {
    background-image: url("images/blinker-right-off.png");
    position: absolute;
    left: 950px;
    top: 78px;
    width: 102px;
    height: 92px;
    &.yes { background-image: url("images/blinker-right-on.png") }
}

.truck-cruiseControlOn {
    background-image: url("images/cruise-off.png");
    position: absolute;
    left: 687px;
    top: 434px;
    width: 82px;
    height: 72px;
    &.yes { background-image: url("images/cruise-on.png") }
}

.truck-cruiseControlSpeedRounded {    
    color: #24b999;
    top: 431px;
}

.truck-lightsBeamHighOn {
    background-image: url("images/highbeam-off.png");
    position: absolute;
    left: 1358px;
    top: 860px;
    width: 123px;
    height: 90px;
    &.yes { background-image: url("images/highbeam-on.png") }
}

.truck-lightsBeamLowOn {
    background-image: url("images/lowbeam-off.png");
    position: absolute;
    left: 1358px;
    top: 954px;
    width: 123px;
    height: 90px;
    &.yes { background-image: url("images/lowbeam-on.png") }
}

.truck-lightsParkingOn {
    background-image: url("images/parklights-off.png");
    position: absolute;
    left: 1484px;
    top: 904px;
    width: 104px;
    height: 98px;
    &.yes { background-image: url("images/parklights-on.png") }
}

.trailer-attached {
    background-image: url("images/trailer-off.png");
    position: absolute;
    left: 1726px;
    top: 890px;
    width: 278px;
    height: 152px;
    &.yes { background-image: url("images/trailer-on.png") }
}

.trailer-mass {
    color: #3e3b60;
    font-family: Courier New, Courier, monospace;
    font-weight: bold;
    font-size: 40px;
    position: absolute;
    left: 1770px;
    top: 906px;
    width: 200px;
    height: 80px;
    text-align: center;    
}

.trailer-name {
    color: #222;
    font-family: Arial, Tahoma;    
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    left: 1742px;
    top: 952px;
    width: 242px;
    height: 80px;
    text-align: center;
    overflow: hidden;
}

.game-time  {
    color: #C2D8ED;
}

.job-remainingTime {
    color: #54d9a8;
}

._jobIncome {
    color: #5dd954;
}

// elements which are hidden by default

.truck-gear,
.truck-blinkerLeftOn,
.truck-blinkerRightOn,
.truck-cruiseControlOn,
.truck-lightsBeamHighOn,
.truck-lightsBeamLowOn,
.truck-lightsParkingOn,
.truck-odometer,
.truck-speedRounded,
.truck-cruiseControlSpeedRounded[data-value="0"],
.trailer-mass, 
.trailer-name, 
._truckWearInfo,
._trailerWearInfo,
.job-remainingTime, 
._jobIncome,
._jobSource, 
._jobDestionation {
    .hidden;
}

// elements which are visible only when dashboard is connected

.dashboard.game-connected.yes {    
    .truck-blinkerLeftOn,
    .truck-blinkerRightOn,
    .truck-cruiseControlOn,
    .truck-lightsBeamHighOn,
    .truck-lightsBeamLowOn,
    .truck-lightsParkingOn,
    .truck-gear,
    ._truckWearInfo,
    ._trailerWearInfo,
    .truck-odometer,
    .truck-speedRounded,
    .truck-cruiseControlSpeedRounded:not([data-value="0"]) {
        .visible;
    }
}

// elements which are visible only when user has a job  

.hasJob {    
    &.yes {
        .trailer-mass, 
        .trailer-name, 
        .job-remainingTime, 
        ._jobIncome,
        ._jobSource, 
        ._jobDestionation {
            .visible;
        }    
    }
}

// job info table

table._job {
    border-collapse: collapse;
    font-family: Courier New, Courier, monospace;
    font-size: 40px;
    position: absolute;
    left: 40px;
    top: 850px;
    width: 1300px;
    height: 280px;
    th {
        color: #aaa;
        width: 260px;
        text-align: right;
    }
    td {
        padding-left: 20px;
        text-align: left;
    }    
}

._jobSource, 
._jobDestionation {
    color: #efbd3a;
}

.statusMessage {
    color: coral;
}

._truckWearInfo,
._trailerWearInfo {
    font-family: Courier New, Courier, monospace;
    font-size: 26px;
    position: absolute;
    left: 1600px;    
    top: 1066px;
    width: 330px;
    height: 30px;
    text-align: left;
    color: #aaa;
    line-height: 90%;
}
._trailerWearInfo {
    left: 1810px;
}

.truck-wearSum,
.trailer-wear {
    font-size: 44px;
    color: orangered;
}